<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        body {
            margin: 0px;
        }

        #time {
            font-size: 50vh;
            line-height: 50vh;
            color: #BABABA;
            min-height: 100vh;
            background: #000;
            cursor: pointer;
            font-family: Impact;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hour,
        .minute {
            padding: 5vh;
            width: 60vh;
            box-sizing: border-box;
            background-color: rgba(97, 94, 94, 0.2);
            border-radius: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .minute {
            margin-left: 10vh;
        }

        .line {
            width: 130vh;
            background-color: #000;
            height: 1vh;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .wrap {
            position: relative;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="line"></div>
        <div id="time">00:00</div>
    </div>


    <script>
        // let showSymbl = false
        function clock() {
            let now = new Date()
            let hour = now.getHours() + ''
            let minute = now.getMinutes() + ''
            // if (showSymbl) {
            document.getElementById('time').innerHTML = `<span class="hour">${hour.padStart(2, '0')}</span><span class="minute">${minute.padStart(2, '0')}</span>`

            // } else {
            //     document.getElementById('time').innerHTML = `<span class="hour">${hour.padStart(2, '0')}</spa><span style="color:#000">:</span><span class="minute">${minute.padStart(2, '0')}</span>`
            // }
            // showSymbl = !showSymbl
        }
        clock()
        setInterval(() => {
            clock()
        }, 60000)

        document.body.addEventListener('click', function () {
            if (!document.fullscreenElement &&
                !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.msRequestFullscreen) {
                    document.documentElement.msRequestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            }
        })

    </script>
</body>

</html>